<template>
  <div class="purchase-invoice-container">
    <!-- 搜索条件区域 -->
    <div class="search-conditions">
      <el-card shadow="never" class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <!-- 开票日期 -->
          <el-form-item label="开票日期">
            <el-date-picker
              v-model="searchForm.invoiceDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="2025-06-01"
              end-placeholder="2025-06-27"
              value-format="YYYY-MM-DD"
              class="date-picker"
            />
          </el-form-item>

          <!-- 单据日期 -->
          <el-form-item label="单据日期">
            <el-date-picker
              v-model="searchForm.orderDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="2025-03-27"
              end-placeholder="2025-06-27"
              value-format="YYYY-MM-DD"
              class="date-picker"
            />
          </el-form-item>

            <!-- 发票号 -->
          <el-form-item label="单据编号">
            <el-input
              v-model="searchForm.num"
              placeholder="请输入"
              clearable
              class="invoice-no-input"
            />
          </el-form-item>

          <!-- 供应商 -->
          <el-form-item label="供应商">
            <el-input
              v-model="searchForm.supplier"
              placeholder="请输入"
              clearable
              class="supplier-input"
            />
          </el-form-item>

          <!-- 业务员 -->
          <el-form-item label="业务员">
            <el-input
              v-model="searchForm.salesman"
              placeholder="请输入"
              clearable
              class="salesman-input"
            />
          </el-form-item>

          <!-- 发票号 -->
          <el-form-item label="发票号">
            <el-input
              v-model="searchForm.invoiceNo"
              placeholder="请输入"
              clearable
              class="invoice-no-input"
            />
          </el-form-item>

          <!-- 发票抬头 -->
          <el-form-item label="发票抬头">
            <el-input
              v-model="searchForm.invoiceTitle"
              placeholder="请输入"
              clearable
              class="invoice-title-input"
            />
          </el-form-item>

          <!-- 登记人 -->
          <el-form-item label="登记人">
            <el-select
              v-model="searchForm.registrant"
              placeholder="空"
              clearable
              class="registrant-select"
            >
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>

          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 表格操作按钮 -->
    <div class="table-actions">
      <el-button @click="handleExport">导出</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
    </div>

    <!-- 数据表格 -->
    <div class="data-table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="operation" label="操作" width="80" align="center">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="单据日期" width="120" align="center" />
        <el-table-column prop="orderNo" label="单据编号" width="180" align="center" />
        <el-table-column prop="relatedOrderNo" label="关联购货订单号" width="180" align="center" />
        <el-table-column prop="supplier" label="供应商" width="220" align="center" />
        <el-table-column prop="registrant" label="登记人" width="120" align="center" />
        <el-table-column prop="createDate" label="制单日期" width="120" align="center" />
        <el-table-column prop="quantity" label="数量" width="100" align="right" />
        <el-table-column prop="amount" label="金额" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.amount) }}
          </template>
        </el-table-column>
        <el-table-column prop="taxAmount" label="税额" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.taxAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="价税合计" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.totalAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="付款状态" width="120" align="center">
          <template #default="{row}">
            <el-tag :type="row.paymentStatus === 'paid' ? 'success' : 'warning'">
              {{ row.paymentStatus === 'paid' ? '已付款' : '未付款' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="invoiceDate" label="开票日期" width="120" align="center" />
        <el-table-column prop="paidAmount" label="已付款" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.paidAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="seller" label="销售方" width="220" align="center" />
        <el-table-column prop="invoiceAmount" label="开票金额" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.invoiceAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="invoiceNo" label="发票号" width="180" align="center" />
        <el-table-column prop="invoiceTitle" label="发票抬头" width="220" align="center" />
        <el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip />
      </el-table>
    </div>

    <!-- 合计行 -->
    <div class="summary-row">
      <span>合计</span>
      <span class="summary-value">{{ tableData.length }}</span>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, prev, pager, next, jumper"
        @current-change="handlePageChange"
      />
      <span class="page-info">1-1 共{{ pagination.total }}条</span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PurchaseInvoiceRegister',
  data() {
    return {
      searchForm: {
        invoiceDateRange: ['2025-06-01', '2025-06-27'],
        orderDateRange: ['2025-03-27', '2025-06-27'],
        supplier: '',
        salesman: '',
        invoiceNo: '',
        invoiceTitle: '',
        registrant: '',
        num:''
      },
      tableData: [
        {
          orderDate: '2025-06-27',
          orderNo: 'GHDD20250606001',
          relatedOrderNo: 'GHDD20250606001',
          supplier: '广州食品批发有限公司',
          registrant: 'u17707302250',
          createDate: '2025-06-27',
          quantity: 5,
          amount: 22.75,
          taxAmount: 0,
          totalAmount: 22.75,
          paymentStatus: 'unpaid',
          invoiceDate: '2025-06-27',
          paidAmount: 0,
          seller: '',
          invoiceAmount: 22.75,
          invoiceNo: '',
          invoiceTitle: '',
          remark: ''
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 1
      },
      selectedRows: []
    }
  },
  methods: {
    handleSearch() {
      console.log('执行查询:', this.searchForm)
      this.fetchData()
    },
    handleExport() {
      console.log('导出数据')
    },
    handleDelete() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      console.log('删除记录:', this.selectedRows)
    },
    handleEdit(row) {
      console.log('编辑记录:', row)
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows
    },
    handlePageChange(page) {
      this.pagination.currentPage = page
      this.fetchData()
    },
    fetchData() {
      // 这里调用API获取数据
      console.log('获取第', this.pagination.currentPage, '页数据')
    },
    formatCurrency(value) {
      return '¥' + value.toFixed(2)
    }
  }
}
</script>

<style scoped>
.purchase-invoice-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-card {
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.el-form-item {
  margin-bottom: 0;
}

.date-picker {
  width: 280px;
}

.supplier-input,
.salesman-input,
.invoice-no-input,
.invoice-title-input {
  width: 150px;
}

.registrant-select {
  width: 120px;
}

.table-actions {
  margin-bottom: 15px;
}

.data-table {
  margin-bottom: 5px;
}

.summary-row {
  padding: 8px 0;
  text-align: right;
  border: 1px solid #ebeef5;
  border-top: none;
  background-color: #f5f7fa;
}

.summary-value {
  margin-left: 20px;
  font-weight: bold;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.page-info {
  margin-left: 15px;
  color: #606266;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-table {
  font-size: 14px;
}

.el-table--border {
  border: 1px solid #ebeef5;
}

.el-table--border ::v-deep .el-table__cell {
  border-right: 1px solid #ebeef5;
}
</style>